<template>
  <div
    :style="{
      fontSize: detail.style.fontSize + 'px',
      fontFamily: detail.style.fontFamily,
      color: detail.style.fontColor,
      textAlign: textAlign,
      lineHeight: lineHeight + 'px',
    }"
  >

    <div
      v-if="detail.dataBind.showType === 'text'"
    >
      <span>{{ param.value }}</span>
    </div>
    <div v-else>
      <el-input :value="param.value">
        <template v-if="detail.dataBind.showType === 'nameWithValueWithUnit'" slot="prepend">{{ param.name }}</template>
        <template
          v-if="detail.dataBind.showType === 'valueWithUnit' || detail.dataBind.showType === 'nameWithValueWithUnit'"
          slot="append"
        >{{ param.unit }}
        </template>
      </el-input>
    </div>
  </div>
</template>

<script>
import BaseView from '../../BaseView'
import { getDeviceParam } from '@/api/iot/iotDeviceParamApi'

export default {
  name: 'IotDeviceParam',
  extends: BaseView,
  props: {},
  data() {
    return {
      param: {}
    }
  },
  watch: {
    detail: function(newVal) {
      this.getDeviceParam()
    }
  },
  created() {
    this.getDeviceParam()
  },
  methods: {
    getDeviceParam() {
      getDeviceParam({
        deviceId: this.detail.dataBind.deviceId,
        keyName: this.detail.dataBind.keyName,
        port: this.detail.dataBind.port
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.param = data
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/element-variables.scss';

.primary-color {
  color: $--color-primary;
}

.item {
  margin-top: 5px;
  padding: 10px;
}

</style>
